/*
	Shopware CSS-Framework
	------------------------------
	http://www.shopware.de
	
	Copyright (c) 2010 Shopware AG
	
	@author:	stp/Shopware AG
	@version	v0.9 beta
	@date: 		05-25-2010
	@modified:	07-13-2010
	@package:	css/framework
	
	
	GRID SYSTEM
	------------------------------
	based on 960gs Gridsystem
	License: Licensed under GPL and MIT
	
	Columns: 20
	Column width: 30px
	Gutter width: 10px
	Full width: 1000px
	Content width: 980px
	
	
	CSS RESET
	------------------------------
	based on YUI 2 Reset
	License: http://developer.yahoo.com/yui/license.html
	Version: 2.8.1
	
	
	FRAMEWORK
	------------------------------
	based on BlueprintCSS Framework
	License: http://wiki.github.com/joshuaclayton/blueprint-css/license
	Version: 0.8
	
*/

/*	GRID GLOBAL
	------------------------ */
.container_20 {margin-left: auto;margin-right: auto;width: 1000px;}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16,.grid_17,.grid_18,.grid_19,.grid_20 {display:inline;float: left;position: relative;margin-left: 10px;margin-right: 10px;}

#right, #center, #detail {position: static;}

/*	GRID FIRST AND LAST COLUMN
	------------------------ */
.first {margin-left: 0;}
.last {margin-right: 0;}

/*	GRID COLUMNS
	------------------------ */
.container_20 .grid_1{width:30px}
.container_20 .grid_2{width:80px}
.container_20 .grid_3{width:130px}
.container_20 .grid_4{width:180px}
.container_20 .grid_5{width:230px}
.container_20 .grid_6{width:280px}
.container_20 .grid_7{width:330px}
.container_20 .grid_8{width:380px}
.container_20 .grid_9{width:430px}
.container_20 .grid_10{width:480px}
.container_20 .grid_11{width:530px}
.container_20 .grid_12{width:580px}
.container_20 .grid_13{width:630px}
.container_20 .grid_14{width:680px}
.container_20 .grid_15{width:730px}
.container_20 .grid_16{width:780px}
.container_20 .grid_17{width:830px}
.container_20 .grid_18{width:880px}
.container_20 .grid_19{width:930px}
.container_20 .grid_20{width:980px}

/*	PREFIX EXTRA SPACE
	------------------------ */
.container_20 .prefix_1{padding-left:50px}
.container_20 .prefix_2{padding-left:100px}
.container_20 .prefix_3{padding-left:150px}
.container_20 .prefix_4{padding-left:200px}
.container_20 .prefix_5{padding-left:250px}
.container_20 .prefix_6{padding-left:300px}
.container_20 .prefix_7{padding-left:350px}
.container_20 .prefix_8{padding-left:400px}
.container_20 .prefix_9{padding-left:450px}
.container_20 .prefix_10{padding-left:500px}
.container_20 .prefix_11{padding-left:550px}
.container_20 .prefix_12{padding-left:600px}
.container_20 .prefix_13{padding-left:650px}
.container_20 .prefix_14{padding-left:700px}
.container_20 .prefix_15{padding-left:750px}
.container_20 .prefix_16{padding-left:800px}
.container_20 .prefix_17{padding-left:850px}
.container_20 .prefix_18{padding-left:900px}
.container_20 .prefix_19{padding-left:950px}
.container_20 .suffix_1{padding-right:50px}
.container_20 .suffix_2{padding-right:100px}
.container_20 .suffix_3{padding-right:150px}
.container_20 .suffix_4{padding-right:200px}
.container_20 .suffix_5{padding-right:250px}
.container_20 .suffix_6{padding-right:300px}
.container_20 .suffix_7{padding-right:350px}
.container_20 .suffix_8{padding-right:400px}
.container_20 .suffix_9{padding-right:450px}
.container_20 .suffix_10{padding-right:500px}
.container_20 .suffix_11{padding-right:550px}
.container_20 .suffix_12{padding-right:600px}
.container_20 .suffix_13{padding-right:650px}
.container_20 .suffix_14{padding-right:700px}
.container_20 .suffix_15{padding-right:750px}
.container_20 .suffix_16{padding-right:800px}
.container_20 .suffix_17{padding-right:850px}
.container_20 .suffix_18{padding-right:900px}
.container_20 .suffix_19{padding-right:950px}

/*	PUSH SPACE
	------------------------ */
.container_20 .push_1{left:50px}
.container_20 .push_2{left:100px}
.container_20 .push_3{left:150px}
.container_20 .push_4{left:200px}
.container_20 .push_5{left:250px}
.container_20 .push_6{left:300px}
.container_20 .push_7{left:350px}
.container_20 .push_8{left:400px}
.container_20 .push_9{left:450px}
.container_20 .push_10{left:500px}
.container_20 .push_11{left:550px}
.container_20 .push_12{left:600px}
.container_20 .push_13{left:650px}
.container_20 .push_14{left:700px}
.container_20 .push_15{left:750px}
.container_20 .push_16{left:800px}
.container_20 .push_17{left:850px}
.container_20 .push_18{left:900px}
.container_20 .push_19{left:950px}

/*	PULL SPACE
	------------------------ */
.container_20 .pull_1{left:-50px}
.container_20 .pull_2{left:-100px}
.container_20 .pull_3{left:-150px}
.container_20 .pull_4{left:-200px}
.container_20 .pull_5{left:-250px}
.container_20 .pull_6{left:-300px}
.container_20 .pull_7{left:-350px}
.container_20 .pull_8{left:-400px}
.container_20 .pull_9{left:-450px}
.container_20 .pull_10{left:-500px}
.container_20 .pull_11{left:-550px}
.container_20 .pull_12{left:-600px}
.container_20 .pull_13{left:-650px}
.container_20 .pull_14{left:-700px}
.container_20 .pull_15{left:-750px}
.container_20 .pull_16{left:-800px}
.container_20 .pull_17{left:-850px}
.container_20 .pull_18{left:-900px}
.container_20 .pull_19{left:-950px}

/*	CLEAR FLOATED ELEMENTS
	------------------------ */
.clear{clear:both;display:block;width:0;height:1px;float:none;font-size:0;line-height:0;padding:0 !important;margin: 0 !important;}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
hr.space {background:#fff;color:#fff;}

/*	CSS-RESET
	------------------------ */
html{color:#000; background:#FFF}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del{text-decoration: line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var, optgroup{font-style:inherit; font-weight:inherit}
del, ins{text-decoration:none}
li{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0; font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input, button, textarea, select, optgroup, option{font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit}
input, button, textarea, select{font-size:100%}

/*	GENERAL & TYPOGRAPHY
	------------------------ */
html{font: 11px/1.3em "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;color: #333;}
p {margin:0 0 1.5em;}
img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
a, a:link, a:visted {color:#5E86AC}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
th {font-weight:bold;}
th, td, caption {padding:4px 10px 4px 5px;}
caption {background:#eee;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
.smallsize {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}
.alt {color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; font-style: italic;font-weight: normal;}
.hide {display: none; visibility: hidden; height: 0px; width: 0px;}
.none {padding: 0; margin: 0; clear:both}
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.hidden {text-indent: -9999em; display: none;}
.bold {font-weight:bold;}
.italic {font-style: italic;}
.left {float: left;}
.center {text-align: center;}
.right {float: right;}
.textright {text-align:right}
.textleft {text-align:left}
.displaynone {display:none;}
.displayblock { display:block }
.hide_script {display: none !important;}

/*	HORIZONTAL LINES
	------------------------ */
hr {background: #ddd; color: #ddd;clear:both;float:none;width:100%; height:0.1%;margin:0 0 1.45em;border:none;position:static;}
.space, .doublespace {background:transparent;border:0 none;height:10px;clear:both; float:none;}
.doublespace {height: 20px;}
hr.line {background: #dedede;width: 100%; height: 10px;visibility: visible; border: 0 none;}
hr.smallline {width: 100%; height: 1px;visibility: visible;background: #ebebeb;border: 0 none;position: static;line-height:0;font-size:0;}

/*	FORM ELEMENTS
	------------------------ */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input[type=text], input[type=email], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=email]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
input[type=text], input.text, input.title, textarea, select {margin:0.5em 0;}
input.text, input.title, .supportrequest input {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background-color:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/*	TABLE
	------------------------ */
table {margin-bottom:1.4em;width:100%;}
thead {background-color:#F3F3F3;line-height: 30px;}
thead tr {border: 1px solid #dfdfdf;}
thead th {padding-left: 5px; font-weight: bold;background-color:#F3F3F3;}
tbody {border: 1px solid #dfdfdf;}
tbody tr {border-bottom: 1px dashed #dfdfdf;}
tbody td {padding: 10px;}
tfoot {background-color:#f3f3f3; border: 1px solid #dfdfdf; border-top: none;}
tfoot td {padding: 20px 10px}

/*	HEADLINES
	------------------------ */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

/*	LINKS
	------------------------ */
a {text-decoration: none;color: #333;}
a:hover {text-decoration: underline;}
a.link {font-weight: bold;}

/*	RESPONSE ELEMENTS
	------------------------ */
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error, .instyle_error, input.instyle_error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success, .instyle_success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* Inline validation */
input[type=text].instyle_error, input[type=password].instyle_error {background-color:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
input[type=text].instyle_success, input[type=password].instyle_success {background:#E6EFC2;color:#264409;border-color:#C6D880;}